/**
 * Created by nickleo on 15/2/10.
 */
function loadShape() {
    $.ajax({
        type: "get",//使用get方法访问后台
        dataType: "json",//返回json格式的数据
        url: "/shape",//要访问的后台地址
        success: function (msg) {//msg为返回的数据，在这里做数据绑定
            var data = msg.table;
            $.each(data, function (i, n) {
                var one = $("#shapetemplate").clone();
                row.find("#div_color").addClass("");

                row.appendTo("#datas");//添加到模板的容器中
            });

        }
    });
}
/**
 * 用来显示模态窗口
 * @param shape_id
 */
function show_model(shape_id, shape_group_id, clustername) {
    $('#shape_model').attr('data-shapeid', shape_id);
    $('#shape_model').attr('data-shapegroupid', shape_group_id);
    $('#shape_model').attr('data-clustername', clustername);
    $('#shape_model').modal('show');
    loadcharts();
}

/**
 * 加载数据, 写发有点屎.凑合着chi吧..
 */
function loadcharts() {
    shape_id = $('#shape_model').attr('data-shapeid');
    name_server = $('#shape_model').attr('data-shapegroupid');
    clustername = $('#shape_model').attr('data-clustername');
    query_time = $('#timeInput').val();
    var url = "/shape/charts/" + shape_id;
    $.ajax({
        type: "get",//使用get方法访问后台
        dataType: "json",//返回json格式的数据
        url: url,//要访问的后台地址
        data: {"name_server": name_server, "query_time": query_time, "clustername": clustername},
        success: function (msg) {//msg为返回的数据，在这里做数据绑定
            $('#chat_container').highcharts(msg);
        }
    });

}


function chart_loadcharts() {
    var url = "/shape/charts/0/";
    $.ajax({
        type: "get",//使用get方法访问后台
        dataType: "json",//返回json格式的数据
        url: url,//要访问的后台地址
        data: {"name_server": "192.168.143.135:9876"},
        success: function (msg) {//msg为返回的数据，在这里做数据绑定
            $('#chart_page_container').highcharts(msg);
        }
    });

}

/**
 * 创建一个shape group 的html 节点.
 *
 */

function createShapeGroup(shapegroup) {

    if (shapegroup != null) {
        var nameserverdiv = "<div class='col-lg-12'> <ol class='breadcrumb'><li class='active'><i class='glyphicon glyphicon-flag'></i> "
            + shapegroup._shape_group_name
            + "</li></ol></div> ";
        return nameserverdiv;

    } else {
        return null;
    }
}
/**
 * 创建一个shaperow 的节点, 里面包含很多的小方块
 * @param shapegroup
 * @returns {*}
 */
function createshapeRow(shapegroup) {

    if (shapegroup != null) {
        var rowDiv = $('<div></div>');
        rowDiv.addClass('row');
        $.each(shapegroup._shapes, function (idx, shape) {

            var shapFmt = "<div class='col-lg-3 col-md-6'>"
                + "<div class='panel panel-" + shape._color + "' data-toggle='modal'"
                + "onclick='show_model(" + shape._shape_id + ",'" + shapegroup._shape_group_id + "'>"
                + "   <div class='panel-heading'> <div class='row'> <div class='col-xs-3'>  <i class='fa fa-tasks fa-5x'></i> </div> <div class='col-xs-9 text-right'>"
                + "              <div class='huge'>" + shape._title + "</div>"
                + "             <div>" + shape._desc + "</div>"
                + "        </div>  </div>  </div>"
                + "   <a href='/shape/" + shape._shape_id + "?name_server=" + shapegroup._shape_group_id + "'>"
                + "       <div class='panel-footer'>"
                + "          <span class='pull-left'>Addr:" + shape._detail + "</span>  <span class='pull-right'><i class='fa fa-arrow-circle-right'></i></span><div class='clearfix'></div>"
                + "      </div></a></div></div>";

            rowDiv.append(shapFmt);
        });
        return rowDiv;

    } else {
        return null;
    }

}


function checkCheckBox() {
    show_chart_all($("#cb_total"));
    show_chart_all($("#cb_tps"));


}
function loadAreaCharts(ui_id, dataValue) {

    var selected = $("#brokerlist  option:selected");
    shape_id = selected.val();
    name_server = selected.attr('data-shapeid');
    clustername = selected.attr('data-cluster');

    time_type = $("#chartSelectTime").attr("data-type");
    time_time = $("#chartSelectTime").attr("data-time");

    var url = "/api/area_charts/" + shape_id;
    $.ajax({
        type: "get",//使用get方法访问后台
        dataType: "json",//返回json格式的数据
        url: url,//要访问的后台地址
        data: {
            "name_server": name_server,
            "clustername": clustername,
            "time_type": time_type,
            "time_time": time_time,
            'datatype': dataValue
        },
        success: function (msg) {
            drawAreaCharts(msg, ui_id);
        }
    });

}

function drawAreaCharts(msg, id) {
    $('#' + id).empty();
    new Morris.Area({
        // ID of the element in which to draw the chart.
        element: id,
        // Chart data records -- each entry in this array corresponds to a point on
        // the chart.
        data: msg.data,
        xkey: msg.xkey,
        ykeys: msg.ykeys,
        labels: msg.labels
    });
}


function show_chart_all(el) {

    var chart = el.val();
    var chart_panel_id = chart + '_chart_pannel';
    var chart_area_id = 'morris-area-chart_' + chart;
    if (el[0].checked) {
        if ($('#' + chart_panel_id).is(":hidden")) {
            $('#' + chart_area_id).empty();
            $('#' + chart_panel_id).show();
        }

        loadAreaCharts(chart_area_id, chart);

    } else {
        if ($('#' + chart_panel_id).is(":visible")) {
            $('#' + chart_panel_id).hide();
            $('#' + chart_area_id).empty();
        }

    }

}
function show_chart(el) {

    var chart = $(el).val();
    var chart_panel_id = chart + '_chart_pannel';
    var chart_area_id = 'morris-area-chart_' + chart;
    if ($(el).context.checked) {
         if ($('#' + chart_panel_id).is(":hidden")) {
            $('#' + chart_area_id).empty();
            $('#' + chart_panel_id).show();
        }
        loadAreaCharts(chart_area_id, chart);

    } else {
         if ($('#' + chart_panel_id).is(":visible")) {
            $('#' + chart_panel_id).hide();
            $('#' + chart_area_id).empty();
        }
    }

}